<template>
  <div class="edit-photo">
    <yk-upload :upload-url="uploadUrl" :draggable="true" @handleSuccess="handleSuccess"></yk-upload>
    <div class="waterfall">
      <div class="waterfall__item" v-for="item in fileList" :key="item.id">
        <img :src="baseImgPath + '/' + item.url" alt="">
        <IconStarFill class="waterfall__item--cover" v-show="coverIndex === item.id"></IconStarFill>
        <yk-space size="ss">
          <p class="waterfall__item--tool" v-show="coverIndex !== item.id" @click="changeCover(item)">设为封面</p>
          <IconDeleteOutline class="waterfall__item--delete" @click="deletePhoto(item)"></IconDeleteOutline>
        </yk-space>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { baseUrl, baseImgPath } from '@/utils/env';
import type { FileData } from '@/utils/interface';
import { useCode } from '@/hooks/code';
import { useFile } from '@/hooks/file';

const { tackleCode } = useCode()

const props = defineProps(['content', 'cover'])

const emits = defineEmits(['cover', 'editors'])


const uploadUrl = `${baseUrl}/upload` // 上传地址

const fileList = ref<{ url: string, id: number }[]>([])

// 封面
const coverIndex = ref<number>(-1)

const changeCover = (e: { id: number; url: string }) => {
  coverIndex.value = e.id
  emits('cover', e.url) // 触发封面事件

}
// 删除图片
const { deleteFile } = useFile()
const deletePhoto = (e: { id: number; url: string }) => {
  fileList.value = fileList.value.filter((item: any) => item.id !== e.id)
  emits('editors', fileList.value.map((obj: any) => JSON.stringify(obj)).join(' '),) // 触发编辑器事件
  if (coverIndex.value === e.id && fileList.value.length > 0) {
    coverIndex.value = fileList.value[0].id
    emits('cover', fileList.value[0].url) // 更新封面
  } else if (coverIndex.value === e.id && fileList.value.length <= 0) {
    coverIndex.value = -1
    emits('cover', '') // 清除封面
  }

  deleteFile(e)
}

// 上传成功
const handleSuccess = (e: { code: number, data: FileData }) => {
  if (tackleCode(e.code)) {
    const photo = {
      id: e.data.id,
      url: e.data.url
    }
    fileList.value.push(photo)
    const content = fileList.value.map((obj: any) => JSON.stringify(obj)).join(' ')
    emits('editors', content) // 触发编辑器事件
    if (coverIndex.value === -1) {
      coverIndex.value = e.data.id // 如果没有封面，设置第一个上传的图片为封面
      emits('cover', e.data.url)
    }
  }

}

watch(
  () => props.content,
  (e) => {
    const cont = e.split(' ')
    fileList.value = cont.map((obj: string) => JSON.parse(obj))
    if (props.cover) {
      for (let i = 0; i < fileList.value.length; i++) {
        if (props.cover === fileList.value[i].url) {
          coverIndex.value = fileList.value[i].id // 如果没有封面，设置第一个上传的图片为封面
        }
      }
    }
  }
)


onMounted(() => {
  // getPhotos()
})
</script>

<style lang="less" scoped>
.edit-photo {
  background: @bg-color-l;
  border-radius: @radius-m;
  padding: @space-xl;
  width: 100%;
  min-height: 660px;
}

.waterfall {
  width: 100%;
  column-count: 3;
  column-gap: @space-xl;
  padding-top: 32px;

  &__item {
    margin-bottom: @space-xl;
    border-radius: @radius-m;
    overflow: hidden;
    line-height: 0%;

    img {
      width: 100%;
    }

    .yk-space {
      position: absolute;
      top: @space-l;
      right: @space-l;
    }

    &--cover {
      position: absolute;
      left: @space-l;
      top: @space-l;
      width: 24px;
      height: 24px;
      color: @wcolor;
    }

    &--tool {
      line-height: 32px;
      padding: 0 @space-m;
      border-radius: @radius-m;
      background: rgba(255, 255, 255, 0.56);
      color: @pcolor;
      cursor: pointer;
      transition: all @animatb;
      opacity: 0;

      &:hover {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(2px);
      }
    }

    &--delete {
      width: 32px;
      height: 32px;
      padding: 9px;
      border-radius: @radius-m;
      background: rgba(255, 255, 255, 0.56);
      color: @gray;
      cursor: pointer;
      transition: all @animatb;
      opacity: 0;

      &:hover {
        color: @ecolor;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(2px);
      }
    }

    &:hover {

      .waterfall__item--tool,
      .waterfall__item--delete {
        opacity: 1;
      }
    }
  }


}

:deep(.yk-upload__file-list) {
  display: none;
}
</style>
